import React, { useRef, useEffect } from 'react';
import { Map, View, Overlay } from 'ol';
import {Tile as TileLayer,Image as ImageLayer} from 'ol/layer';
import OSM from 'ol/source/OSM';
import {ImageStatic} from 'ol/source'


function MyMaker({position}){
    const ref = useRef(null);
    return <div ref={ref}>
        <span>hello world</span>
    </div>;
}

function MyMap({ children, center, zoom, ...rest }) {
    const mapRef = useRef(null);
    useEffect(() => {
        const map = new Map({
            target: mapRef.current,
            layers: [
            new ImageLayer({
                source: new ImageStatic({
                    url: 'm3.png',
                    projection: 'EPSG:3857',
                    imageExtent: [116.3, 39.8, 116.5, 39.9] // 图像的范围
                })
            })],
            view: new View({
                center: center,
                zoom: zoom,
                extent: [116.3, 39.8, 116.5, 39.9]
            })
        });



        // 将 children 作为 Overlay 添加到地图上
        React.Children.forEach(children, (child) => {
            if (React.isValidElement(child)) {
                debugger
                console.log(child);
                // 假设 child 组件提供了 position 属性
                const overlay = new Overlay({
                    element: child.ref.current,
                    position: child.props.position,
                });
                map.addOverlay(overlay);
            }
        });

        return () => {
            map.setTarget(null);
        };
    }, [children, center, zoom]);

    return <div ref={mapRef} {...rest} style={{"width":"100%","height":"960px"}}  />;
}

export {MyMaker};
export default MyMap;